<template>
    <div class="jianzhan-content">
        <Crumb name="Customer"/>
        <div class="content">
            <el-button @click="openDialog" icon="el-icon-plus" size="small" type="primary">Add Customer</el-button>
            <Search>
                <el-input v-model="key" size="small" class="input" placeholder="Search by Customer name"/>
                <el-select v-model="status" size="small" class="input" placeholder="Customer Status">
                    <el-option :value=0 label="Active"/>
                    <el-option :value=1 label="Not Active"/>
                </el-select>
                <el-button type="primary" size="small" icon="el-icon-search">Search</el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                    :data="customerList.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                    border
                    stripe
                >
                    <el-table-column label="Customer No" prop="customerNo"/>
                    <el-table-column label="Customer Name" prop="customerName"/>
                    <el-table-column label="City" prop="city"/>
                    <el-table-column label="Level" prop="customerLevel"/>
                    <el-table-column label="Phone" prop="phoneNumber"/>
                    <el-table-column label="Business" prop="business"/>
                    <el-table-column width="300">
                        <template slot-scope="customer">
                            <el-button icon="el-icon-edit" size="small" type="primary" @click="editDialog(customer.row)">Edit</el-button>
                            <el-button icon="el-icon-edit" size="small" type="warning" @click="changeStatus(customer.row)">Change Status</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" title="customer">
            <el-form ref="customers" :rules="rule" label-width="150px" :model="customer">
                <el-form-item label="Customer No" required prop="customerNo" >
                    <el-input size="small" v-model="customer.customerNo"/>
                </el-form-item>
                <el-form-item label="customer name" required prop="customerName">
                    <el-input size="small" v-model="customer.customerName"/>
                </el-form-item>
                <el-form-item label="customer level">
                    <el-input size="small" v-model="customer.customerLevel"/>
                </el-form-item>
                <el-form-item label="area">
                    <el-input size="small" v-model="customer.area"/>
                </el-form-item>
                <el-form-item label="city">
                    <el-input size="small" v-model="customer.city"/>
                </el-form-item>
                <el-form-item label="business">
                    <el-input size="small" v-model="customer.business"/>
                </el-form-item>
                <el-form-item label="phone" required prop="phoneNumber">
                    <el-input size="small" v-model="customer.phoneNumber"/>
                </el-form-item>
                <el-form-item label="duty no">
                    <el-input size="small" v-model="customer.dutyNo"/>
                </el-form-item>
                <el-form-item label="introduction">
                    <el-input size="small" v-model="customer.introduction"/>
                </el-form-item>
                <el-form-item label="address">
                    <el-input v-model="customer.address" size="small"></el-input>
                </el-form-item>
                <el-button type="primary" size="small" @click="addContact" style="margin-bottom: 10px;margin-right: 50%;">Add contact man</el-button>
                <el-form-item label="contact">
                    <div v-for="(item,index) in customer.contact" :key="index" style="padding: 5px;border: 2px dashed #409eff;margin-bottom: 5px;">
                        <el-input v-model="item.customerId" size="small" placeholder="Customer ID"></el-input>
                        <el-input v-model="item.contactName" size="small" placeholder="Customer Name"></el-input>
                        <el-input v-model="item.jobPosition" size="small" placeholder="Job Position"></el-input>
                        <el-input v-model="item.email" size="small" placeholder="Email"></el-input>
                        <el-input v-model="item.phone" size="small" placeholder="Phone"></el-input>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="submitForm">Confirm</el-button>
                    </span>
        </el-dialog>
    </div>
</template>

<script>
    import {getCustomer,addCustomer,modCustomer,changeCustomerStatus} from "../../api/customer";
    import {clear} from "../../util";
    import Crumb from '../../components/common/crumb'
    import Search from '../../components/common/search'
    import mixins from '../../util/mixins'
    import {ERROR_OK} from "../../util/config";

    export default {
        name: "customer",
        mixins:[mixins],
        data(){
            return {
                list:[],
                key:'',
                status:0,
                dialogVisible:false,
                rule:{
                    customerName:[
                        {required:true,trigger:'blur',max:50}
                    ],
                    customerNo:[
                        {required:true,trigger:'blur',}
                    ],
                    phoneNumber:[
                        {required:true,trigger:'blur'},
                    ],
                },
                customer:{
                    customerNo:'',
                    customerName:'',
                    city:'',
                    customerLevel: '',
                    phoneNumber:'',
                    business:'',
                    area:'',
                    introduction:'',
                    dutyNo:'',
                    addresss:'',
                    contact:[
                        {
                            customerId:'',contactName:'',jobPosition:'',email:'',phone:''
                        }
                    ]
                }
            }
        },
        created(){
            this.getCustomer()
        },
        computed:{
            myCustomerList(){
                return this.list.filter(item=>item.customerName.toLowerCase().indexOf(this.key.toLowerCase())>-1)
            },
            customerList(){
                return this.myCustomerList.filter(item => item.status === this.status)
            }
        },
        methods:{
            addContact(){
                this.customer.contact.push({
                    customerId:'',contactName:'',jobPosition:'',email:'',phone:''
                })
            },
            submitForm(){
                this.$refs.customers.validate(async valid=> {
                    if (valid) {
                        this.customer.contact = JSON.stringify(this.customer.contact);
                        if(this.customer.customerId){
                            const {status} = await modCustomer(this.customer);
                            if (status === ERROR_OK) {
                                this.$notify.success('Modify successfully');
                            } else {
                                this.$notify.error('Error,please retry')
                            }
                        } else {
                            const {status} = await addCustomer(this.customer);
                            if (status === ERROR_OK) {
                                this.$notify.success('Add successfully');
                                this.getCustomer();
                            } else {
                                this.$notify.error('Error,please retry')
                            }
                        }
                        this.dialogVisible = false
                    } else {
                        this.$notify.error('Form is not complete')
                    }
                })
            },
            async changeStatus(customer){
                if(customer.status) {
                    customer.status = 0;
                } else {
                    customer.status = 1;
                }
                const {status:status1} = await changeCustomerStatus({customerId:customer.customerId,status:customer.status});
                if(status1 === ERROR_OK) {
                    const idx = this.list.findIndex(item=>item.customerId===customer.customerId);
                    this.list.splice(idx,1,customer);
                    this.$notify.success('Status changed')
                }
            },
            async getCustomer(){
                const {status,data} = await getCustomer();
                if (status === ERROR_OK) {
                    this.list = data.list;
                    this.total = data.list.length
                }
            },

            openDialog(){
                clear(this.customer);
                this.customer.contact = [{
                    customerId:'',contactName:'',jobPosition:'',email:'',phone:''
                }];
                this.dialogVisible =true
            },
            editDialog(customer) {
                this.customer = customer;
                if(!this.customer.contact) {
                    this.$set(this.customer,'contact',[{
                        customerId:'',contactName:'',jobPosition:'',email:'',phone:''
                    }])
                }
                this.dialogVisible = true
            }
        },
        watch:{
            customerList(list){
                this.total = list.length
            }
        },
        components:{
            Crumb,Search
        }
    }
</script>

<style scoped lang="scss">
    @import '../../css/mixins';
    .content{
        @include content
    }
</style>